import React from 'react';
import {Row, Col, Input, Icon, Modal, Table, Button, notification} from 'antd';
import {Tag} from 'antd';
import {getSubAll} from "../../services/showServer";
import {addSub} from "../../services/showServer";
import {updateSub} from "../../services/showServer";
import {deleteSub} from "../../services/showServer";

class SubListContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonLoading: false,
      subName: '',
      id: '',
      name: '',
      comment: '',
      addModalVisible: false,
      updateModalVisible: false,
      deleteModalVisible: false,
      data: [],
    };
  }

  componentDidMount() {
    getSubAll().then(function (json) {
      this.setState({
        data: json
      });
    }.bind(this));
  }

  addModalClick() {
    this.setState({addModalVisible: true});
  }

  shareModalClick(record) {
    window.location.href='/s?id=' + record.id;
  }

  updateModalClick(record) {
    this.setState({
      id: record.id,
      name: record.name,
      comment: record.comment,
      updateModalVisible: true,
    });
  }

  deleteModalClick(record) {
    this.setState({
      id: record.id,
      name: record.name,
      comment: record.comment,
      deleteModalVisible: true,
    });
  }

  handleAddModalOk() {

    var subs = {
      "subjects": [
        {
          "comment": this.state.comment,
          "name": this.state.name
        }
      ]
    }

    addSub(subs).then(function (res) {
      //更新成功后刷新页面数据
      if (res.status == 200) {
        getSubAll().then(function (json) {
          this.setState({
            name: '',
            comment: '',
            addModalVisible: false,
            data: json
          });
        }.bind(this));
      } else {
        this.setState({
          name: '',
          comment: '',
          addModalVisible: false,
        });
        notification['error']({
          message: 'Error',
          description: '添加主题错误，请稍后重试！',
        })
      }
    }.bind(this));

  }

  handleAddModalCancel() {
    this.setState({
      name: '',
      comment: '',
      addModalVisible: false,
    });
  }

  handleUpdateModalOk() {


    var sub = {
      "comment": this.state.comment,
      "id": this.state.id,
      "name": this.state.name
    }

    updateSub(sub).then(function (res) {
      //更新成功后刷新页面数据
      if (res.status == 200) {
        getSubAll().then(function (json) {
          this.setState({
            id: '',
            name: '',
            comment: '',
            updateModalVisible: false,
            data: json
          });
        }.bind(this));
      } else {
        this.setState({
          id: '',
          name: '',
          comment: '',
          updateModalVisible: false,
        });
        notification['error']({
          message: 'Error',
          description: '更新主题错误，请稍后重试！',
        })
      }
    }.bind(this));

  }

  handleUpdateModalCancel() {
    this.setState({
      id: '',
      name: '',
      comment: '',
      updateModalVisible: false,
    });
  }

  handleDeleteModalOk() {


    deleteSub(this.state.id).then(function (res) {
      //更新成功后刷新页面数据
      if (res.status == 200) {
        getSubAll().then(function (json) {
          this.setState({
            id: '',
            name: '',
            comment: '',
            deleteModalVisible: false,
            data: json
          });
        }.bind(this));
      } else {
        this.setState({
          id: '',
          name: '',
          comment: '',
          deleteModalVisible: false,
        });
        notification['error']({
          message: 'Error',
          description: '删除主题错误，请稍后重试！',
        })
      }
    }.bind(this));

  }

  handleDeleteModalCancel() {
    this.setState({
      id: '',
      name: '',
      comment: '',
      deleteModalVisible: false,
    });
  }

  handleNameChange(e) {
    this.setState({
      name: e.target.value,
    });
  }

  handleCommentChange(e) {
    this.setState({
      comment: e.target.value,
    });
  }

  onRowClick(e) {
    this.setState({
      subName: e.name,
    });
    this.props.signal.dispatch(e);
  }

  render() {
    const {subName, data, addModalVisible, updateModalVisible, deleteModalVisible, name, comment} = this.state;
    const columns = [{
      title: '主题',
      key: 'name',
      dataIndex: 'name',
      width: '20%',
    }, {
      title: '主题说明',
      key: 'comment',
      dataIndex: 'comment',
    }, {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: '18%',
      render: (record) =>
        <div>
          <Button type="primary" shape="circle" size="small" style={{background: '#FFAA00', border: 0}}
                  onClick={this.shareModalClick.bind(this, record)}>
            <Icon style={{ color: '#F0F0F0'}} type="share-alt"/>
            {/*分享*/}
          </Button>
          &nbsp;&nbsp;
          <Button type="primary" shape="circle" size="small" style={{border: 0}}
                  onClick={this.updateModalClick.bind(this, record)}>
            <Icon style={{ color: '#F0F0F0'}} type="edit"/>
            {/*修改*/}
          </Button>
          &nbsp;&nbsp;
          <Button type="primary" shape="circle" size="small" style={{background: '#D9534F', border: 0}}
                  onClick={this.deleteModalClick.bind(this, record)}>
            <Icon style={{ color: '#F0F0F0'}} type="cross"/>
            {/*删除*/}
          </Button>
        </div>
    }];

    const pagination = {
      total: data.length,
      showSizeChanger: true,
    };

    return (
      <div>
        <div style={{marginBottom: 16}}>
          <Button type="primary" style={{background: '#6B9D25', border: 0}}
                  onClick={this.addModalClick.bind(this)}>
            添加主题
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {/*当前主题：{subName}*/}
          <Tag color="#108ee9">当前主题：{subName}</Tag>
        </div>
        <Table bordered size="middle" columns={columns} pagination={pagination}
               dataSource={data} onRowClick={this.onRowClick.bind(this)}/>
        <Modal ref="addModal"
               visible={addModalVisible}
               title="添加主题" onOk={this.handleAddModalOk.bind(this)} onCancel={this.handleAddModalCancel.bind(this)}
               footer={[
                 <Button key="back" type="ghost" onClick={this.handleAddModalCancel.bind(this)}>返
                   回</Button>,
                 <Button loading={this.state.buttonLoading} key="submit" type="primary" onClick={this.handleAddModalOk.bind(this)}>
                   提 交
                 </Button>,
               ]}
        >
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>主题名称：</p></Col>
            <Col span={21}>
              <Input id="name" value={name} onChange={this.handleNameChange.bind(this)}/>
            </Col>
          </Row>
          <p></p>
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>主题说明：</p></Col>
            <Col span={21}>
              <Input id="comment" type="textarea" rows={4} value={comment}
                     onChange={this.handleCommentChange.bind(this)}/>
            </Col>
          </Row>
        </Modal>

        <Modal ref="updateModal"
               visible={updateModalVisible}
               title="更新主题" onOk={this.handleUpdateModalOk.bind(this)}
               onCancel={this.handleUpdateModalCancel.bind(this)}
               footer={[
                 <Button key="back" type="ghost" onClick={this.handleUpdateModalCancel.bind(this)}>返
                   回</Button>,
                 <Button loading={this.state.buttonLoading} key="submit" type="primary" onClick={this.handleUpdateModalOk.bind(this)}>
                   保 存
                 </Button>,
               ]}
        >
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>主题名称：</p></Col>
            <Col span={21}>
              <Input id="name" value={name}
                     onChange={this.handleNameChange.bind(this)}/>
            </Col>
          </Row>
          <p></p>
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>主题说明：</p></Col>
            <Col span={21}>
              <Input id="comment" type="textarea" rows={4} value={comment}
                     onChange={this.handleCommentChange.bind(this)}/>
            </Col>
          </Row>
        </Modal>

        <Modal ref="deleteModal"
               visible={deleteModalVisible}
               title="您是否确认要删除这项主题？" onOk={this.handleDeleteModalOk.bind(this)}
               onCancel={this.handleDeleteModalCancel.bind(this)}
               footer={[
                 <Button key="back" type="ghost" onClick={this.handleDeleteModalCancel.bind(this)}>返
                   回</Button>,
                 <Button loading={this.state.buttonLoading} key="submit" type="primary" onClick={this.handleDeleteModalOk.bind(this)}>
                   确 定
                 </Button>,
               ]}
        >
          <Row>
            <Col span={3} style={{textAlign: "right"}}><p>主题名称：</p></Col>
            <Col span={21}>
              <p>{name}</p>
            </Col>
          </Row>
        </Modal>
      </div>
    );
  }
}

export default SubListContainer;
